<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jsonco
 * @Date: 2022-05-25 19:54:25
 * @LastEditors: sueRimn
 * @LastEditTime: 2022-06-06 21:09:49
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./gl-matrix.js"></script>
    <script>
        let vertexstring = `
        attribute vec4 a_position;
        uniform mat4 u_formMatrix;
        attribute vec4 a_color;
        varying vec4 color;
        void main(void){
            gl_Position = u_formMatrix * a_position;
            color = a_color;
        }
        `;
        let fragmentstring = `
        precision mediump float;
        varying vec4 color;
        void main(void){
          gl_FragColor =color;
        }
        `;

        var webgl;
        var uniformTexture = 0;
        var uniformTexture1 = 0;
        var uniformAnim = 0;
        var count = 0;
        var texture0;
        var texture1;
        var projMatrix = glMatrix.mat4.create()


        function init() {
            initWebgl();
            initShader();
            initBuffer();
            draw();
        }
        function initWebgl() {
            let webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("webgl");


        }
        function initShader() {

            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);

            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);
            if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(vsshader);
                alert(err);
                return;
            }
            if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(fsshader);
                alert(err);
                return;
            }
            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader)
            webgl.linkProgram(program);
            webgl.useProgram(program);
            webgl.program = program

        }
        function initBuffer() {
            let arr = [

                0.0, 0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
                -0.5, -0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,
                0.5, -0.5, -0.4, 1, 0.4, 1.0, 0.4, 1,

                0.5, 0.4, -0.2, 1, 1.0, 1.0, 0.4, 1,
                -0.5, 0.4, -0.2, 1, 1.0, 1.0, 0.4, 1,
                0.0, -0.6, -0.2, 1, 1.0, 1.0, 0.4, 1,

                0.0, 0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
                -0.5, -0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,
                0.5, -0.5, 0.0, 1, 0.4, 0.4, 1.0, 1,

                // 0.0, 0.6, -0.4, 1,    0.4, 1.0, 1,1, // The back green one
                // -0.5, -0.4, -0.4,  1, 0.4, 1.0, 1,1,
                // 0.5, -0.4, -0.4, 1,  0.4, 1.0,1,1,

                // 0.5, 0.4, -0.2,  1, 1.0, 1.0, 0.4,1, // The middle yellow one
                // -0.5, 0.4, -0.2, 1,  1.0, 1.0, 0.4,1,
                // 0.0, -0.6, -0.2,1,   1.0, 1.0, 0.4,1,

                // 0.0, 0.5, 0.0,  1,   0.4, 0.4, 1.0,1, // The front blue one 
                // -0.5, -0.5, 0.0,1,  0.4, 0.4, 1.0,1,
                // 0.5, -0.5, 0.0, 1,  0.4, 0.4, 1.0,1,






            ]

            let pointPosition = new Float32Array(arr);
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
            let triangleBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
            webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
            webgl.enableVertexAttribArray(aPsotion);
            webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 8 * 4, 0);
            let aColor = webgl.getAttribLocation(webgl.program, "a_color");
            webgl.enableVertexAttribArray(aColor);
            webgl.vertexAttribPointer(aColor, 4, webgl.FLOAT, false, 8 * 4, 4 * 4);

            let modelView = glMatrix.mat4.create();
            glMatrix.mat4.identity(modelView);
            debugger
            modelView = glMatrix.mat4.lookAt(modelView, [0, 0, 0.2], [0, 0, 0], [0, 1, 0]);
            console.log(modelView);

            let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");
            webgl.uniformMatrix4fv(uniformMatrix1, false, modelView);
        }

        function draw() {
            webgl.clearColor(0.0, 1.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
            webgl.drawArrays(webgl.TRIANGLES, 0, 9);
        }

    </script>
</head>

<body onload="init()">
    <canvas id='myCanvas' width="1024" height='768'></canvas>
</body>

</html>